import 'package:badges/badges.dart';
import 'package:flutter/material.dart';
import 'package:people_big_people/base/base_scaffold.dart';
import 'package:people_big_people/page/main_bottom_tab_page/friend.dart';
import 'package:people_big_people/page/main_bottom_tab_page/home.dart';
import 'package:people_big_people/page/main_bottom_tab_page/message.dart';
import 'package:people_big_people/page/main_bottom_tab_page/mine.dart';
import 'package:people_big_people/page/main_bottom_tab_page/personal.dart';
import '../event/home_refresh_event.dart';
import '../event/message_red_badges_event.dart';
import '../utils/event_bus_utils.dart';
import '../utils/status_bar_color.dart';
import '../../base/base_state.dart';

class Desktop extends StatelessWidget {
  const Desktop({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const DesktopPage();
  }
}

class DesktopPage extends StatefulWidget {
  const DesktopPage({Key? key}) : super(key: key);

  @override
  State<DesktopPage> createState() => _DesktopPageState();
}

class _DesktopPageState extends BaseState<DesktopPage>
    with SingleTickerProviderStateMixin, AutomaticKeepAliveClientMixin {
  ///tab页面集合
  final List<Widget> _pagesList = [const Home(), const Message(), const Friend(), const Personal(), const Mine()];

  ///当前page下标
  int _currentIndex = 0;

  ///消息红点
  final ValueNotifier<int> _msgRedBadgesNumNotifier = ValueNotifier<int>(0);

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      _getMsgRedBadgesNum();
    });
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return BaseScaffold(
      statusBarColor: StatusBarColor.dark,
      body: _pagesList[_currentIndex],
      bottomNavigationBar: _bottomNavigationBar(),
    );
  }

  ///订阅红点消息事件
  void _getMsgRedBadgesNum() {
    eventBus.on<MessageRedBadgesEvent>((event) {
      _msgRedBadgesNumNotifier.value = event.count ?? 0;
    });
  }

  ///底部导航
  Widget _bottomNavigationBar() => BottomNavigationBar(
        key: const ValueKey("bottomNavigationBar"),
        selectedFontSize: 12.0,
        unselectedFontSize: 12.0,
        selectedItemColor: Colors.red,
        unselectedItemColor: Colors.black,
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
              label: '首页',
              tooltip: '', //禁用弹窗
              icon: GestureDetector(
                child: const Icon(Icons.home),
                onDoubleTap: () {
                  eventBus.emit(HomeRefreshEvent(true));
                },
              )),
          BottomNavigationBarItem(
            label: '消息',
            tooltip: '', //禁用弹窗
            icon: ValueListenableBuilder(
                valueListenable: _msgRedBadgesNumNotifier,
                builder: (context, value, child) {
                  int redBadgesNum = value as int;
                  return Badge(
                    showBadge: redBadgesNum != 0,
                    shape: BadgeShape.circle,
                    position: BadgePosition.topEnd(),
                    borderRadius: BorderRadius.circular(100),
                    animationDuration: const Duration(milliseconds: 300),
                    animationType: BadgeAnimationType.fade,
                    badgeContent: Container(
                      alignment: Alignment.center,
                      height: 10,
                      width: 10,
                      decoration: const BoxDecoration(shape: BoxShape.circle, color: Colors.red),
                      child: Text(
                        "$value",
                        style: const TextStyle(color: Colors.white, fontSize: 8),
                      ),
                    ),
                    child: const Icon(Icons.message),
                  );
                }),
          ),
          const BottomNavigationBarItem(
            label: '朋友圈',
            tooltip: '', //禁用弹窗
            icon: Icon(Icons.child_friendly),
          ),
          const BottomNavigationBarItem(
            label: '主页',
            tooltip: '', //禁用弹窗
            icon: Icon(Icons.pending_outlined),
          ),
          const BottomNavigationBarItem(
            label: '我的',
            tooltip: '', //禁用弹窗
            icon: Icon(Icons.person),
          ),
        ],
        onTap: (index) {
          _currentIndex = index;
          setState(() {});
        },
        currentIndex: _currentIndex,
      );

  @override
// TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}
